<%--
Created by IntelliJ IDEA.
User: 陪你度过漫长岁月
Date: 2022/8/5
Time: 11:42
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>按钮组件</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                开发环境
            </div>
            <div class="layui-card-body">
                Pear Button 参考 Element UI 样式 ，提供 Button 服务
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								<link rel="stylesheet" href="component/pear/css/pear.css"/>
								或
								<link rel="stylesheet" href="component/pear/css/pear-module/button.css"/>
							</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                简单使用
            </div>
            <div class="layui-card-body">
                <button class="pear-btn">Default Button</button>&nbsp;&nbsp;
                <button class="pear-btn pear-btn-primary">Primary Button</button>&nbsp;&nbsp;
                <br>
                <br>
                <button class="pear-btn pear-btn-primary"> Button-Primary</button>&nbsp;&nbsp;
                <button class="pear-btn pear-btn-success"> Button-Success</button>&nbsp;&nbsp;
                <button class="pear-btn pear-btn-danger"> Button-danger</button>&nbsp;&nbsp;
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								<button class="pear-btn"> Default Button </button>
								<button class="pear-btn" dashed> Dashed Button </button>
								<button class="pear-btn pear-btn-primary"> Primary Button </button>							
								<button class="pear-btn pear-btn-primary"> Button-Primary </button>
								<button class="pear-btn pear-btn-success"> Button-Success </button>
							</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                简约样式
            </div>
            <div class="layui-card-body">
                <button plain class="pear-btn pear-btn-primary"> Button-Primary</button>&nbsp;&nbsp;
                <button plain class="pear-btn pear-btn-success"> Button-Success</button>&nbsp;&nbsp;
                <button plain class="pear-btn pear-btn-danger"> Button-Danger</button>&nbsp;&nbsp;
                <button plain class="pear-btn pear-btn-warming"> Button-Warming</button>&nbsp;&nbsp;
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								<button class="pear-btn"> Default Button </button>
								<button class="pear-btn" dashed> Dashed Button </button>
								<button class="pear-btn pear-btn-primary"> Primary Button </button>							
								<button class="pear-btn pear-btn-primary"> Button-Primary </button>
								<button class="pear-btn pear-btn-success"> Button-Success </button>
							</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                按钮大小
            </div>
            <div class="layui-card-body">
                <button class="pear-btn pear-btn-primary pear-btn-lg"> Button-Lg</button>&nbsp;&nbsp;
                <button class="pear-btn pear-btn-primary"> Button-Default</button>&nbsp;&nbsp;
                <button class="pear-btn pear-btn-primary pear-btn-sm"> Button-Sm</button>&nbsp;&nbsp;
                <button class="pear-btn pear-btn-primary pear-btn-xs"> Button-Xs</button>&nbsp;&nbsp;
                <br>
                <br>
                <button class="pear-btn pear-btn-warming pear-btn-lg"> Button-Lg</button>&nbsp;&nbsp;
                <button class="pear-btn pear-btn-warming"> Button-Default</button>&nbsp;&nbsp;
                <button class="pear-btn pear-btn-warming pear-btn-sm"> Button-Sm</button>&nbsp;&nbsp;
                <button class="pear-btn pear-btn-warming pear-btn-xs"> Button-Xs</button>&nbsp;&nbsp;
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								<button class="pear-btn pear-btn-primary pear-btn-lg"> Button-Lg </button>&nbsp;&nbsp;
								<button class="pear-btn pear-btn-primary"> Button-Default </button>&nbsp;&nbsp;
								<button class="pear-btn pear-btn-primary pear-btn-sm"> Button-Sm </button>&nbsp;&nbsp;
								<button class="pear-btn pear-btn-primary pear-btn-xs"> Button-Xs </button>&nbsp;&nbsp;
							</pre>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                按钮组
            </div>
            <div class="layui-card-body">
                <div class="pear-btn-group">
                    <button class="pear-btn pear-btn-primary" round> Button-One</button>
                    <button class="pear-btn pear-btn-primary" round> Button-Two</button>
                    <button class="pear-btn pear-btn-primary" round> Button-Three</button>
                </div>
                <br>
                <br>
                <div class="pear-btn-group">
                    <button class="pear-btn"> Button-One</button>
                    <button class="pear-btn"> Button-Two</button>
                    <button class="pear-btn"> Button-Three</button>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								<div class="pear-btn-group">
								    <button class="pear-btn"> Button-One </button>
								    <button class="pear-btn"> Button-Two </button>
								    <button class="pear-btn"> Button-Three </button>
								</div>
							</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                Load 自动
            </div>
            <div class="layui-card-body">
                <button class="pear-btn pear-btn-primary" load> 加载 600 ms</button>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								layui.use(["button"], function() {
								    var button = layui.button;
								    
									button.load({
								        elem:'[load]',
								        time: 600,
								        done: function(){
									        popup.success("加载完成");
								        }
								    })
								})
							</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                Load 手动
            </div>
            <div class="layui-card-body">

                <button class="pear-btn pear-btn-primary" loading> 开始</button>

                <button class="pear-btn pear-btn-danger" stop> 停止</button>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								layui.use(["button"], function() {
								    var button = layui.button;
								    
									var dom = button.load({
								        elem:'[load]',
								    })
									
								    dom.stop(function() {
								        popup.failure("已停止");
								    });
								})
							</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                本页跳转
            </div>
            <div class="layui-card-body">
                <button class="pear-btn pear-btn-primary" to> 本页跳转</button>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								layui.use(["jquery"], function() {
								    var $ = layui.jquery;
								    
								    $("[to]").click(function(){
								        top.layui.frame.changePageByElement("content","http://www.baidu.com","百度一下",true)
								    })
								})
							</pre>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    layui.use(['element', 'code', 'jquery', "button", "popup"], function () {
        var element = layui.element;
        var $ = layui.jquery;
        var popup = layui.popup;
        var button = layui.button;

        layui.code();

        $("[load]").click(function () {
            button.load({
                elem: '[load]',
                time: 600,
                done: function () {
                    popup.success("加载完成");
                }
            })
        })

        var dom;

        $("[loading]").click(function () {
            dom = button.load({
                elem: '[loading]'
            })
        })

        $("[stop]").click(function () {
            dom.stop(function () {
                popup.failure("已停止");
            });
        })

        $("[to]").click(function () {
            top.layui.admin.jump(14, "百度一下", "http://www.bing.com", true)
        })
    })
</script>
</body>
</html>
